import React, { Component } from 'react';
import Taro from '@tarojs/taro';
import {AtLoadMore} from 'taro-ui';
import {View} from '@tarojs/components';
import {GetRequest, vcmonitor} from "../../utils/tools";
import {Good} from '../../utils/server.interface';
import {http} from '../../utils/http';
import {CITY_LABELS_LIST, IDENTITY_IS_SELLER} from '../../constants/api';
import {platform} from '../../utils/platform-settting.service';
import {h5Wx} from "../../utils/h5.service";
import GzhAuth from "../../components/gzh-auth/gzh-auth"
import Category from "../../pages/index/template/regionalCategory/component/category";

export default class CityLabels extends Component {
  state: {
    labelId: number
    goods: Good[]
    isUser: boolean
    showMore: boolean
    loadMoreStatus: "more" | "loading" | "noMore"
  } = {
    labelId: 0,
    goods: [],
    loadMoreStatus: 'loading',
    isUser: true,
    showMore: true
  }

  async componentDidShow() {
    vcmonitor(this);
    let isUser = true
    if (process.env.DISTINGUISH_IDENTITY) {
      const identityIsSeller = await http.get(IDENTITY_IS_SELLER, {})
      isUser = !identityIsSeller.isSeller
    }
    this.setState({isUser})
  }

  async UNSAFE_componentWillMount() {
    if (process.env.TARO_ENV === 'h5') {
      await h5Wx.getConfig()
    }
    const {id = 0} = Taro.getCurrentInstance().router.params;
    const setting = await platform.getSetting();
    if (setting && setting.platformName) {
      Taro.setNavigationBarTitle({
        title: setting.platformName
      })
    }
    this.setState({labelId: id}, async () => {
      const goods = await this.loadData()
      this.setState({showMore: goods.length === 0, loadMoreStatus: 'noMore', goods})
    })
  }

  async loadData(): Promise<Good[]> {
    return new Promise(resolve => {
      this.setState({showMore: true, loadMoreStatus: 'loading'}, async () => {
        const goods = (await http.post(CITY_LABELS_LIST, {p: this.page, labelId: this.state.labelId})) || [];
        resolve(goods)
      })
    });
  }

  async onReachBottom() {
    if (this.state.loadMoreStatus !== 'noMore') {
      this.page++
      const goods = await this.loadData()
      const old = this.state.goods
      if (goods.length < 10) {
        this.setState({showMore: true, loadMoreStatus: 'noMore', goods: [...old, ...goods]})
      } else {
        this.setState({showMore: true, loadMoreStatus: 'more', goods: [...old, ...goods]})
      }
    }
  }

  async onPullDownRefresh() {
    this.setState({goods: [], showMore: true, loadMoreStatus: 'loading'}, async () => {
      this.page = 1
      const goods = await this.loadData()
      if (goods.length < 10) {
        this.setState({loadMoreStatus: 'noMore', goods})
      } else {
        this.setState({loadMoreStatus: 'more', goods})
      }
      Taro.stopPullDownRefresh()
    })
  }

  page = 1

  render() {
    const {showMore, loadMoreStatus, goods, isUser} = this.state
    return (
      <View style='padding-top: 10px'>
        <GzhAuth />
        <Category isUser={isUser} data={goods} />
        {showMore && <AtLoadMore status={loadMoreStatus} noMoreText='没有更多了~' moreBtnStyle='border:none;'
          moreText='加载更多'
        />}
        <View style='height: 30px;' />
      </View>
    )
  }
}
